// 颜色变量
$green51: #87bf34;



// 控制内容块的样式
.tabs-hover, .tabs-click {
  .tabs-contents {
    .tab-content {
      display: none;
    }
    .active {
      display: block;
    }
  }
}
// 样式一
.tab-hover-1 {
  width: 470px;
  margin:0 auto;
  .hover-1-navtop {
    border-bottom:1px solid #ccc;
    li {
      float: left;
      width: 20%;
      .nav-item {
        display: block;
        width: 100%;
        height: 27px;
        border-bottom:2px solid transparent;
        line-height: 27px;
        text-align: center;
        cursor: pointer;
      }
      .nav-item.active {
        border-color:#019934;
      }
    }
  }
}



// 样式二
.tab-hover-2:after,.tab-hover-2:before{content: "";display: table;}
.tab-hover-2:after{clear: both;}
.tab-hover-2{*zoom:1;}
.tab-hover-2 {
  .hover-2-navtop {
    float: left;
    width: 10%;
    .nav-item {
      display: block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .nav-item.active {
      background:#FF9933;
      color: #fff;
    }
  }
  .hover-2-contents {
    float: left;
    width: 90%;
    height: 160px;
    text-align: center;
  }
}


// 样式三和样式四导航左侧公共部分
.tab-hover-3, .tab-hover-4{
  .big-title {
      float: left;
      font-size: 18px;
      padding-left: 30px;
  }
  .title {
    &:after, &:before {
      content: "";display: table;
    }
    &:after {
      clear: both;
    }
    *zoom:1;
  }
}
// 样式三
.tab-hover-3 {

  .title {
    border-bottom:4px solid #01B25A;
    .big-title {
      line-height: 30px;
    }
    .hover-3-navtop {
      float: left;
      height: 30px;
      margin-left: 100px;
      li {
        float: left;
        height: 21px;
        position:relative;
        top: 4px;
        border-left:2px solid #ccc;
        .nav-item {
          display: block;
          padding:0 15px;
          line-height: 30px;
          margin-top:-4px;
          font-size: 14px;
          cursor: pointer;
        }
        .nav-item.active {
          color: #01B25A;
        }

      }
      li:first-child {
        border-left:none;
      }
    }
    .more {
      float: right;
      padding-right: 10px;
      line-height: 30px;
    }
  }
}


// 样式四
.tab-hover-4 {
  .title {
    height: 38px;
    background:#C2F2CD;
    line-height: 38px;
    .big-title {
      line-height: 38px;
    }
    .hover-4-navtop {
      float: right;
      li {
        float: left;
        .nav-item {
          display: block;
          padding:0 5px;
          font-size: 13px;
        }
        .nav-item.active {
          background: #fff;
          color: #FF9933;
        }
      }
    }
  }
}



// 样式五
.tab-hover-1.tab-hover-5 {
  width: 578px;
  .hover-1-navtop {
    border-color:#87BF34;
    li{
      .nav-item {
        height:34px;
        border:none;
        line-height: 34px;
      }
      .nav-item.active {
        background:#87BF34;
        color: #fff;
      }
    }
  }
}



// 点击切换样式一
.tab-click-1 {
  .block-title {
    border-bottom:2px solid $green51;
    .click-1-navtop {
      width: 240px;
      margin:0 auto;
      li {
        float: left;
        margin-right: 25px;
        .nav {
          display: block;
          width: 95px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          background:#e0e0e0;
        }
        .nav.active {
          background:$green51;
          color: #fff;
        }
      }

    }
  }
}


// 点击切换样式二
.tab-click-2 {
    width: 340px;
    margin:0 auto;
  .click-2-navtop {

    &:after, &:before {
      content: "";display: table;
    }
    &:after {
      clear: both;
    }
    *zoom:1;
    .nav {
      display: block;
      float: left;
      width: 50%;
      height: 37px;
      border-bottom:2px solid #transparent;
      line-height: 37px;
      text-align: center;
    }
    .nav.active {
      border-bottom:2px solid $green51;
      color: $green51;
      font-weight: 900;
    }
  }
  .click-2-contents {
    text-align: center;
  }
}




// 点击切换样式三
.tab-click-3 {
  .click-3-navtop {
    border-bottom:1px solid $green51;
    &:after, &:before {
      content: "";display: table;
    }
    &:after {
      clear: both;
    }
    *zoom:1;
    li {
      float: left;
      display: block;
      margin-bottom:-1px;
      .nav {
        display: block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
      .nav.active {
        border:1px solid $green51;
        border-bottom:1px solid #fff;
      }
    }
  }
  .click-3-contents {
    padding:20px 0;
    border:1px solid $green51;
    border-top:none;
    text-align: center;
  }
}
